<template>
	<video
		id="jswebrtc-video"
		:autoplay="state.autoplay"
		:controls="state.controls"
		:playsinline="state.playsinline"
		:muted="state.muted"
		style="width: 100%; height: 100%"
	></video>
</template>

<script lang="ts" setup>
/**
 * see https://gitee.com/kernelj/jswebrtc
 */
import { useAttrs } from "element-plus";
import "../../../public/libs/jswebrtc.min.js";
let attrs = useAttrs();
onMounted(() => {
	videoPlayer();
});
const state = reactive({
	autoplay: true,
	controls: true,
	muted: true,
	playsinline: false,
	player: null
});
const videoPlayer = () => {
	let video: HTMLElement | null = document.getElementById("jswebrtc-video");

	state.player = new (window as any).JSWebrtc.Player(attrs.value.videoUrl, {
		video: video,
		autoplay: true,
		onPlay: (obj: any) => {
			console.log("webrtc playing...", obj);
		}
	});
};
</script>
